<div class="modal-header" style="padding:0.5rem">
    <h5 class="modal-title">
        <span>Add Heading h1-h6</span>
    </h5>
    <span class="pull-right">
        <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
            [disabled]="saving">
            <i aria-hidden="true" class="bi bi-x"></i>
        </button>
    </span>
</div>
<div class="modal-body" >
    <h5 >Level</h5>
    <div class="checkbox-list">
        <div class="form-group">
            <label for="heading_h1" class="checkbox" style="margin-bottom: 0">
                <input id="heading_h1" class="check" type="radio" name="heading" [(ngModel)]="heading" value="1"> 
                <span></span>
                &lt;h1/&gt;
            </label>
        </div>
        <div class="form-group">
            <label for="heading_h2" class="checkbox" style="margin-bottom: 0">
                <input id="heading_h2" class="check" type="radio" name="heading" [(ngModel)]="heading" value="2"> 
                <span></span>
                &lt;h2/&gt;
            </label>
        </div>
        <div class="form-group">
            <label for="heading_h3" class="checkbox" style="margin-bottom: 0">
                <input id="heading_h3" class="check" type="radio" name="heading" [(ngModel)]="heading" value="3"> 
                <span></span>
                &lt;h3/&gt;
            </label>
        </div>
        <div class="form-group">
            <label for="heading_h4" class="checkbox" style="margin-bottom: 0">
                <input id="heading_h4" class="check" type="radio" name="heading" [(ngModel)]="heading" value="4"> 
                <span></span>
                &lt;h4/&gt;
            </label>
        </div>
        <div class="form-group">
            <label for="heading_h5" class="checkbox" style="margin-bottom: 0">
                <input id="heading_h5" class="check" type="radio" name="heading" [(ngModel)]="heading" value="5"> 
                <span></span>
                &lt;h5/&gt;
            </label>
        </div>
        <div class="form-group">
            <label for="heading_h6" class="checkbox" style="margin-bottom: 0">
                <input id="heading_h6" class="check" type="radio" name="heading" [(ngModel)]="heading" value="6"> 
                <span></span>
                &lt;h6/&gt;
            </label>
        </div>
    </div>

    <div class="form-group form-md-line-input form-md-floating-label no-hint">
        <label>{{"Text" | localize}}</label>
        <input type="text" name="text" class="form-control" [ngClass]="{'edited':data}" [(ngModel)]="data" >
    </div>
</div>
<div class="modal-footer">
    <button [disabled]="saving" type="button" class="btn btn-default font-weight-bold"
            (click)="close()">
        {{"Cancel" | localize}}
    </button>
    <button  class="btn btn-primary blue"  [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" (click)="save()">
       <i class="fa fa-save"></i>{{"Save" | localize}}
    </button>
</div>